<template>
  <div class="mall">
    <!-- banner 区域 -->
    <div class="mall-banner">
      <div class="mall-banner-margin">
        <img
          class="image-align-center"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0120d15e01c068a80120a895b5bf80.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653561096&t=edeb9c526e2ac69b46eedb557963dc14"
          alt=""
        />
      </div>
    </div>
    <!-- 二级导航 -->
    <div
      class="mall-navigation"
      @mouseover="onMouseover"
      @mouseout="onMouseout"
    >
      <div
        class="mall-navigation-tab"
        v-for="(tablebar, index) in navigationList"
        :key="index"
        @click="onNavigation(index)"
      >
        <div class="navigation-tab-name">{{ tablebar.title }}</div>
        <div class="navigation-tab-active" v-show="navIndex == index"></div>
      </div>
    </div>
    <!-- 内容展示 -->
    <div class="mall-content">
      <ProductGoods v-if="navIndex == 0" amount="6" :list="productData" />
      <MaterialGoods
        v-else-if="navIndex == 1"
        amount="6"
        :list="materialDate"
      />
      <Announcement v-else-if="navIndex == 2" :list="noticeData" />
    </div>
    <!-- 查看更多 -->
    <div class="mall-more">
      <div
        class="mall-more-config button-convention"
        @click="onProductInfo"
        v-if="navIndex == 0"
      >
        查看更多
      </div>
      <div
        class="mall-more-config button-convention"
        @click="onMaterialInfo"
        v-else-if="navIndex == 1"
      >
        查看更多
      </div>
    </div>
  </div>
</template>

<script>
import ProductGoods from '@/components/product-goods';
import MaterialGoods from '@/components/material-goods';
import Announcement from '@/views/mall/announcement';
import Product from '@/api/product';
import Material from '@/api/material';
import Notice from '@/api/notice';
import Way from '@/utils/way';
import { mapMutations } from 'vuex';

export default {
  name: 'mall',
  components: { ProductGoods, MaterialGoods, Announcement },
  props: {},
  data() {
    return {
      // 二级导航
      navigationList: [
        { title: '产品市场' },
        { title: '素材市场' },
        { title: '全部公告' },
      ],
      navIndex: 0, // 二级导航索引 0: 产品市场 ; 1: 素材市场
      navigationTimer: null, // 二级导航 自动播放
      productData: [], // 产品市场
      materialDate: [], // 素材市场
      noticeData: [], // 公告
    };
  },
  computed: {},
  watch: {},
  created() {
    this.setTimer();
    this.getProductList();
    this.getMaterialList();
    this.getNoticeData();
  },
  methods: {
    ...mapMutations(['getTabMall']),
    // 二级导航点击事件
    onNavigation(idx) {
      this.navIndex = idx;
    },
    // 移入事件
    onMouseover() {
      if (this.navigationTimer == null) return;
      this.deleteTimer();
    },
    // 移出事件
    onMouseout() {
      if (this.navigationTimer != null) return;
      this.setTimer();
    },
    // 设置定时器
    setTimer() {
      this.navigationTimer = setInterval(() => {
        // if (this.navIndex >= 2) return (this.navIndex = 0);
        // this.navIndex++;
      }, 3 * 1000);
    },
    // 取消定时器
    deleteTimer() {
      clearInterval(this.navigationTimer);
      this.navigationTimer = null;
    },

    // 获取产品列表
    getProductList() {
      const that = this;
      const param = {
        cateId: '',
        title: '',
        page: 1,
        limit: 18,
      };
      Product.getProductList(param).then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.productData = res.data.rows;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 获取素材列表
    getMaterialList() {
      const that = this;
      const param = {
        cate_id: '',
        title: '',
        page: 1,
        limit: 18,
      };
      Material.getMaterialList(param).then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.materialDate = res.data.rows;
        }
      });
    },

    // 获取公告列表
    getNoticeData() {
      const that = this;
      Notice.getNoticeList().then((res) => {
        if (res.code == 200) {
          that.noticeData = res.data.rows;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 跳转到产品列表
    onProductInfo() {
      this.$router.push({ name: 'product' });
      this.getTabMall('product');
      localStorage.setItem('toolValueIndex', 'product');
    },

    // 跳转到素材列表
    onMaterialInfo() {
      this.$router.push({ name: 'material' });
      this.getTabMall('material');
      localStorage.setItem('toolValueIndex', 'material');
    },
  },
  mounted() {},
  beforeDestroy() {
    this.deleteTimer();
  },
};
</script>

<style scoped lang="less">
.mall {
  // banner 区域
  .mall-banner {
    width: 100%;
    height: 250px;

    .mall-banner-margin {
      position: relative;
      overflow: hidden;
      height: 100%;
      width: 100%;
    }
  }

  // 二级导航
  .mall-navigation {
    margin-top: 20px;
    height: 55px;
    display: flex;
    border-bottom: 1px solid rgba(201, 201, 201, 0.5098039215686274);

    .mall-navigation-tab {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      cursor: pointer;
      margin-right: 56px;
      height: 55px;

      .navigation-tab-name {
        font-size: 20px;
        color: rgba(0, 0, 0, 0.85);
      }

      .navigation-tab-active {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 70px;
        height: 2px;
        background-color: #00359b;
      }
    }
  }

  // 内容展示
  .mall-content {
    margin-top: 24px;

    /deep/ .el-carousel__container {
      height: 520px;
    }
    /deep/ .el-carousel__button {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }

  // 查看更多
  .mall-more {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    padding-bottom: 30px;

    .mall-more-config {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
